<template>
    <div class="website-container">
        <tab></tab>
        <div style="height: 80px; line-height: 80px; margin-left: 60px; color: #3C4858; font-size: 24px">网站资源导航</div>
        <div class="website-wrap">
            <div class="slider-left">
                <el-menu
                        default-active="0"
                        background-color="#fff"
                        text-color="#000"
                        active-text-color="#fff"
                >
                    <el-menu-item v-for="(item, index) in navList" @click="onclick(index)" :index="`${index}`" :key="index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <el-row class="slider-right" :gutter="30">
                <el-col class="col-wrap" @click.native="navigator(item.url)" :span="6" v-for="item in dataList" :key="item.url">
                    <el-card class="box-card">
                        <div class="logo">
                            <img :src="item.imgeUrl"> {{item.title}}
                        </div>
                        <div class="desc">{{item.desc}}</div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import tab from '../../base/tab/tab'
import {dataList} from '../../mock/website'
export default {
    data () {
        return {
            navList: [
                {
                  icon: 'el-icon-notebook-2',
                  title: '学习资源'
                },{
                  icon: 'el-icon-camera-solid',
                  title: '图片资源'
                },{
                  icon: 'el-icon-s-platform',
                  title: '办公资源'
                },{
                  icon: 'el-icon-video-camera-solid',
                  title: '娱乐资源'
                },{
                  icon: 'el-icon-search',
                  title: '搜索资源'
                },{
                  icon: 'el-icon-help',
                  title: '工具资源'
                },
            ],
            dataList: dataList[0]
        }
    },
    methods: {
        navigator (url) {
            if (!url) { return }
            window.open(url)
        },
        onclick (index) {
            this.dataList = dataList[index]
        }
    },
    components: {
        tab
    }
}
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    .website-container {
        /deep/ .tab-wrapper {
            position: relative;
            background: $bg-tab;
            opacity: 0.83;
        }
        .website-wrap {
            display: grid;
            grid-template-columns: 250px 1fr;
            .slider-left {
                max-width: 250px;
                width: 100%;
                ::v-deep .el-menu {
                    border-top: solid 1px #e6e6e6;
                    border-bottom: solid 1px #e6e6e6;
                    box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28);
                }

                ::v-deep .el-menu-item.is-active {
                    background-color: #3395FF !important;
                    box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2);
                }

                ::v-deep .el-menu-item {
                    padding-right: 20px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .slider-right {
                height: 75vh;
                overflow-y: auto;
                padding: 20px;
                box-sizing: border-box;
                background-color: #EEEEEE;
                .col-wrap {
                    margin-bottom: 30px;
                    cursor: pointer;
                }
                .box-card {
                    display: flex;
                    flex-direction: column;
                    .logo {
                        height: 40px;
                        position: relative;
                        font-size: 14px;
                        font-weight: 700;
                        color: #3273dc;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-bottom: 10px;
                        img {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            vertical-align: middle;
                        }
                    }
                    .desc {
                        color: gray;
                        font-size: 12px;
                        padding-top: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }
</style>
